<template>
  <div class="pane">
    <template v-if="list.length>0">
      <div v-for="item in list" :key="item.id" class="lb">
        <div class="xinxi" @click="gotoDetail(item)">
          <i>{{ item.append | timeFormat() }}</i>
          <p>{{ item.title }}</p>
        </div>
      </div>
    </template>
    <div v-else class="wujilu">
      <i class="iconfont icon-zanwuyituichudingdan"></i>
      <p>{{ $t('您还没有信息') }}!</p>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      list: [],
      limit_begin: 0
    }
  },
  beforeMount () {
    this.getCateList()
  },
  methods: {
    ...mapActions({
      getCate: 'user/getCate'
    }),
    getCateList (page) {
      const payload = {
        id: 9,
        limit_num: 20,
        limit_begin: page || this.limit_begin
      }
      this.getCate(payload)
        .then((data) => {
          this.list = data.data
        })
    },
    gotoDetail (item) {
      this.$router.push({
        path: '/user/notice-detail',
        query: {
          title: item.title,
          url: encodeURIComponent(item.article_url)
        }
      })
    }
  }
}
</script>
<style scoped>
.wujilu {
  width: 100%;
  float: left;
  text-align: center;
  margin: 100px 0;
}
.wujilu i {
  font-size: 70px;
  color: #c5c9d5;
}
.wujilu p {
  color: #828fa2;
  line-height: 30px;
}
.pane {
  height: 100%;
  overflow-y: auto;
}
</style>
